<template>
    <div class="main">
        <song-list height="auto" :songs="songs" />
        <play-list height="auto" :playLists="playLists" />
    </div>
</template>
<style lang="scss" scoped>
.main{
  width: 100%;
  height: 90%;
  overflow: scroll;
}
.loading{
  display: flex;
  height: 20rem;
  justify-content: center;
  align-items: center;
}
</style>
<script setup>
import {getSearchSynthetical} from "../../api/api";
import {ref, watch, toRefs, defineProps, computed} from "vue";
import SongList from "../list/SongList.vue";
import PlayList from "../list/PlayList.vue";
import {useStore} from "vuex";
import ArtistList from "../list/ArtistList.vue";

let store = useStore()
let musicProgress = computed(() => store.state.music.musicCurrentTime);


let songs = ref([]);

let playLists = ref([]);

let propsDef = defineProps({
  keyword:{
    type:String
  }
});

getSearchSynthetical(propsDef.keyword).then(res => {
  let result = res.result;
  songs.value = result.song.songs
  playLists.value = result.playList.playLists;
  videos.value = result.video.videos;
  artists.value = result.artist.artists;
  loading.value = false;
}).catch(()=>{
  loading.value = false;
})

let props = toRefs(propsDef);

</script>